<template>
  <Container class="common-list bg-light">
    <seasonExceptionEdit ref="seasonExceptionEdit" @complete="getData" />
    <Tabs v-model="tab">
      <Button
        slot="extra"
        size="large"
        class="item"
        type="primary"
        icon="md-add"
        @click="onAddPolicy"
      >新增政策</Button>
      <TabPane label="季度例外政策" name="tab1">
        <FormItem :label-width="20">
          <div class="common-class">
            <i class="ivu-icon ivu-icon-ios-alert" />
            <span>提示：本政策仅影响积分返利计算，和基金无关。多个政策时以最后修改的政策为准</span>
          </div>
        </FormItem>
        <div v-for="(item,index) in list.data" :key="index" class="table-content">
          <div class="table-describe">
            <span>政策名称: {{ item.policyName }}</span>
            <span>生效时间: {{ item.beginDate | formatDateFilter }} - {{ item.endDate | formatDateFilter }}</span>
            <span>最后修改时间: {{ item.endDate | formatDateFilter }}</span>
            <Button type="primary" @click="openEdit(item)">编辑</Button>
            <Button type="primary" @click="onDelete(item, index)">删除</Button>
          </div>
          <Table
            stripe
            border
            :columns="list.columns"
            :data="item.policyItems"
            no-data-text="亲，没有找到相关记录哦！~"
          />
        </div>
        <Loader :status="status" @refresh="getData" />
        <div v-if="list.data.length==0" class="no-data">
          <p>亲,暂时没有任何政策哦！</p>
        </div>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import { formatDate } from '@/util'
import seasonExceptionEdit from './seasonExceptionEdit'
export default {
  components: { seasonExceptionEdit },
  filters: {
    formatDateFilter (v) {
      return formatDate(v)
    }
  },
  data () {
    return {
      show: false,
      tab: 'tab1',
      status: 'pass',
      list: {
        data: [],
        columns: [
          { title: '门店类型', key: 'storeTypeName', align: 'left' },
          { 
            renderHeader: (h, p) => {
            let inner = h('div', [
              h('span', '升级后类型'),
              h('Icon', {
                props: {
                  type: 'ios-help-circle',
                  size: 18
                }
              })
            ])
            return h('Tooltip', {
              props: {
                content: '升级后给门店计算正常的门店类型',
                placement: 'top',
                transfer: true
              }
            }, [inner])
          },
            key: 'upgradeStoreTypeName',
            align: 'left' 
          },
          { title: '升级门槛(%)', key: 'upgradeThreshold', align: 'left' }
        ]
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    onAddPolicy () {
      this.$refs.seasonExceptionEdit.open()
    },
    openEdit (item) {
      this.$refs.seasonExceptionEdit.open(item)
    },
    getData () {
      this.status = 'loading'
      this.$ajaxGet('/setting/quarter_rebate_policy/page').then(data => {
        this.list.data = []
        this.list.data = (data || [])
        this.status = 'pass'
      }).catch(() => {
        this.status = 'error'
      })
    },
    onDelete (item, index) {
      let { id, policyName: name } = item
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前政策？',
        onOk: () => {
          this.$ajaxPost(`/setting/quarter_rebate_policy/delete/${id}`).then(data => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${name}</span> 已被删除。`
            })
            this.getData()
          })
        }
      })
    }
  }
}
</script>
